<template>
  <div class="container">
    <div class="layout" ref="screen">
      <div class="header">
        <div class="btnLeft">
          <button class="btn pre" @click="goToPrev"></button>
        </div>
        <div class="headTit">金牛电气库房管理系统</div>
        <div class="btnRight">
          <!-- <button
          class="btn auto"
          :class="{ isFull: isBigScreen.fullscreen }"
          @click="handleFullScreen"
        ></button> -->
          <button class="btn end" @click="goToEnd"></button>
        </div>
      </div>
      <div class="main">
        <div class="deviceBox">
          <div class="deviceKG">
            <div class="title">开关柜</div>
            <div class="kgItem">
              <div class="kyItemLeft">
                <div class="itemCenter">
                  <div class="centerImg">
                    <img
                      src="../../assets//img/monitor/total.png"
                      alt=""
                      width="70"
                      height="70"
                    />
                  </div>
                  <div class="itemCenterRight">
                    <div>
                      <div class="leftTitle">库存预警(种类)</div>
                      <div class="titleNum" style="color: #fcd63d">{{ inventoryData || 0}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="kyItemLeft">
                <div class="itemCenter">
                  <div class="centerImg">
                    <img
                      src="../../assets/img/monitor/donot.png"
                      alt=""
                      width="70"
                      height="70"
                    />
                  </div>
                  <div class="itemCenterRight">
                    <div>
                      <div class="leftTitle">未到货预警(种类)</div>
                      <div class="titleNum" style="color: #ff5134">{{ kgNotData || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="deviceKG" style="margin-top: 20px;">
            <div class="title">变压器</div>
            <div class="kgItem">
              <div class="kyItemLeft">
                <div class="itemCenter">
                  <div class="centerImg">
                    <img
                      src="../../assets//img/monitor/total.png"
                      alt=""
                      width="70"
                      height="70"
                    />
                  </div>
                  <div class="itemCenterRight">
                    <div>
                      <div class="leftTitle">库存预警(种类)</div>
                      <div class="titleNum" style="color: #fcd63d">{{ inDataChange || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="kyItemLeft">
                <div class="itemCenter">
                  <div class="centerImg">
                    <img
                      src="../../assets/img/monitor/donot.png"
                      alt=""
                      width="70"
                      height="70"
                    />
                  </div>
                  <div class="itemCenterRight">
                    <div>
                      <div class="leftTitle">未到货预警(种类)</div>
                      <div class="titleNum" style="color: #ff5134">{{ notDataChange || 0 }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="map">
          <MapChart></MapChart>
        </div>
        <div class="right">
          <div class="up">
            <div style="font-size: 18px; color: #00ffff; margin: 10px">
              年度设备出库统计
            </div>
            <div class="mainBox">
              <div class="itemBox">
                <div class="num">{{ deviceNum }}</div>
                <div class="itemImg" @click="jumpOpen(1)">
                  <img
                    src="../../assets/img/list/listKgg.png"
                    style="width: 129px; height: auto"
                    alt=""
                  />
                </div>
                <div class="itemBottom itemKg">开关柜数量</div>
              </div>
              <div class="itemBox">
                <div class="num" style="color: #5ce4ec">{{ deviceNumByq }}</div>
                <div class="itemImg" @click="jumpChange(1)">
                  <img
                    src="../../assets/img/list/byq.png"
                    style="width: 109px; height: auto"
                    alt=""
                  />
                </div>
                <div class="itemBottom itemBY" style="color: #5ce4ec">
                  变压器数量
                </div>
              </div>
            </div>
          </div>
          <div class="middle">
            <div style="font-size: 18px; color: #00ffff; margin: 10px">
              月度开关柜产量
            </div>
            <div class="monthDay">
              <div class="monthBg"></div>
              <!-- <monthKG :key="KG"></monthKG> -->
              <monthKG
                :currentMonthData="currentMonthData"
                :monthCountData="monthCountData"
                :key="KG"
              ></monthKG>
            </div>
          </div>
          <div class="middle">
            <div style="font-size: 18px; color: #00ffff; margin: 10px">
              月度变压器产量
            </div>
            <div class="monthDay">
              <div class="monthBg"></div>
              <!-- <monthBar :key="BY"></monthBar> -->
              <monthBar
                :currentMonthDataByq="currentMonthDataByq"
                :monthCountDataByq="monthCountDataByq"
                :key="BY"
              ></monthBar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MapChart from "@/components/overall/MapCpn.vue";
import monthKG from "@/components/overall/monthKG.vue";
import monthBY from "@/components/overall/monthBY.vue";
import monthBar from "@/components/overall/monthBar.vue";
import ScreenApi from "@/api/purchase/screen-api";
import ScreenApiByq from "@/api/purchase/screen-apiByq";
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";

//是否全屏
const isBigScreen = reactive({
  fullscreen: false, // 是否全屏
});

const KG = ref(false);
const BY = ref(false);

const router = useRouter();
const jumpOpen = (val) => {
  router.push({
    name: "openChange",
    query: {
      val: val,
    },
  });
};

const jumpChange = () => {
  router.push("change");
};

function handleFullScreen() {
  let element = document.documentElement;
  // 判断是否已经是全屏,如果是全屏，退出
  if (isBigScreen.fullscreen) {
    if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  } else {
    // window.onresize = () => {
    //   screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
    // };
    // screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
    // 否则，进入全屏
    if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      //火狐
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    } else if (element.requestFullscreen) {
      // w3c
      element.requestFullscreen();
    }
  }
  isBigScreen.fullscreen = !isBigScreen.fullscreen;
}

//回退
function goToPrev() {
  router.go(-1);
  if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

//终端
const goToEnd = () => {
  router.push("/index");
  if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
};

let screen = ref();

function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh;
}

const deviceNum = ref(0);
const deviceNumByq = ref(0);

const yearOutbound = async () => {
  const res = await ScreenApi.yearOutbound();
  deviceNum.value = res.data.data;
};

const yearOutboundByq = async () => {
  const res = await ScreenApiByq.yearOutbound();
  deviceNumByq.value = res.data.data || 0;
};

const currentMonthData = ref([]);
const monthCountData = ref([]);

const monthOutbound = async () => {
  const res = await ScreenApi.monthOutbound();
  let currentMonth = [];
  currentMonth = res.data.data;
  currentMonthData.value = currentMonth.map((item) => {
    return item.currentMonth.replace(/\d{4}-/, "");
  });
  monthCountData.value = currentMonth.map((item) => {
    return item.monthCount;
  });
};

const currentMonthDataByq = ref([]);
const monthCountDataByq = ref([]);

const monthOutboundByq = async () => {
  const res = await ScreenApiByq.monthOutbound();
  let currentMonth = [];
  currentMonth = res.data.data;
  currentMonthDataByq.value = currentMonth.map((item) => {
    return item.currentMonth.replace(/\d{4}-/, "");
  });
  monthCountDataByq.value = currentMonth.map((item) => {
    return item.monthCount;
  });
};

const inventoryAlarmData = ref([]);
const inventoryData = ref(0)
const inventoryAlarm = async () => {
  const res = await ScreenApi.inventoryAlarm();
  inventoryAlarmData.value = res.data.data;
  inventoryData.value = inventoryAlarmData.value.length || 0
};

const notDeliveredData = ref([]);
const kgNotData = ref(0)
const notDelivered = async () => {
  const res = await ScreenApi.notDelivered();
  notDeliveredData.value = res.data.data;
  kgNotData.value = notDeliveredData.value.length || 0
};

const inventoryChange = ref([]);
const inDataChange = ref(0)
const inventoryAlarmChange = async () => {
  const res = await ScreenApiByq.inventoryAlarm();
  inventoryChange.value = res.data.data;
  inDataChange.value = inventoryChange.value.length || 0
};

const notDeliveredDataChange = ref([]);
const notDataChange = ref(0)
const notDeliveredChange = async () => {
  const res = await ScreenApiByq.notDelivered();
  notDeliveredDataChange.value = res.data.data;
  notDataChange.value = notDeliveredDataChange.value.length || 0
};

window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};

onMounted(async () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
  let element = document.documentElement;
  if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  } else if (element.mozRequestFullScreen) {
    //火狐
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    // IE11
    element.msRequestFullscreen();
  } else if (element.requestFullscreen) {
    // w3c
    element.requestFullscreen();
  }
  await yearOutbound();
  await yearOutboundByq();
  await monthOutbound();
  await monthOutboundByq();
  await inventoryAlarm();
  await notDelivered();
  await inventoryAlarmChange()
  await notDeliveredChange()
  KG.value = !KG.value;
  BY.value = !BY.value;
});
</script>

<style scoped lang="scss">
body {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

// * 隐藏滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 隐藏滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.container {
  width: 100vw;
  height: 100vh;
  .layout {
    box-sizing: border-box;
    background-color: #0e1f21;
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    .header {
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding-top: 23px;
      display: flex;
      justify-content: space-between;
      //background: url("../assets/img/layout/headerBg.png") no-repeat center;
      // background: url("~@/assets/img/layout/hbg.png") no-repeat center;
      background: url("~@/assets/img/layout/wmsheader.png") no-repeat center;
      background-size: cover;
      position: relative;
      .headTit {
        font-size: 50px;
        color: #00ffff;
        font-weight: bold;
        letter-spacing: 5px;
        // margin-left: 94px;
      }

      .btn {
        margin: 0 21px;
        cursor: pointer;
        border: none;
      }

      .pre {
        width: 107px;
        height: 20px;
        background: url("~@/assets/img/layout/pre.png") no-repeat center;
        background-size: contain;
      }

      .home {
        width: 93px;
        height: 20px;
        background: url("~@/assets/img/layout/home.png") no-repeat center;
        background-size: contain;
      }

      .auto {
        width: 63px;
        height: 20px;
        background: url("~@/assets/img/layout/auto.png") no-repeat center;
        background-size: contain;
      }

      .isFull {
        width: 63px;
        height: 20px;
        background: url("~@/assets/img/layout/full.png") no-repeat center;
        background-size: contain;
      }

      .end {
        width: 62px;
        height: 20px;
        background: url("~@/assets/img/layout/end.png") no-repeat center;
        background-size: contain;
      }

      .out {
        width: 96px;
        height: 20px;
        background: url("~@/assets/img/layout/out.png") no-repeat center;
        background-size: contain;
      }
    }

    .main {
      width: 1920;
      height: 980px;
      position: relative;
      box-sizing: border-box;
      .deviceBox {
        box-sizing: border-box;
        position: absolute;
        z-index: 1111;
        width: 390px;
        height: 550px;
        left: 40px;
        top: 25px;
        .deviceKG {
          box-sizing: border-box;
          padding-top: 15px;
          width: 100%;
          height: 258px;
          background: url("../../assets/img/list/listItem.png") no-repeat center;
          background-size: cover;
          .title {
            color: #00ffff;
            font-size: 18px;
            font-weight: bold;
            margin-left: 20px;
          }
          .kgItem {
            width: 100%;
            height: 200px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .kyItemLeft {
              width: 45%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              .itemCenter {
                width: 190px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                .centerImg {
                  width: 70px;
                  height: 70px;
                }
                .itemCenterRight {
                  margin-left: 5px;
                  width: 120px;
                  height: 80px;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  .leftTitle {
                    font-size: 14px;
                    color: white;
                  }
                  .titleNum {
                    font-size: 20px;
                    text-align: center;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
      }
      .map {
        width: 1437px;
        height: 911px;
        position: absolute;
        left: 0;
        overflow: hidden;
      }
      .right {
        position: absolute;
        width: 532px;
        height: auto;
        top: 40px;
        right: 25px;
        // background-color: aliceblue;
        display: flex;
        align-items: center;
        justify-content: right;
        flex-direction: column;
        .up {
          width: 532px;
          height: 294px;
          background: url("../../assets/img/layout/itemBg.png") no-repeat center;
          background-size: cover;

          .mainBox {
            display: flex;
            justify-content: space-evenly;
            align-items: center;

            .itemBox {
              width: 137px;
              height: auto;
              display: flex;
              align-items: center;
              flex-direction: column;
              margin-top: 20px;
              .num {
                font-size: 20px;
                color: #ffa800;
                margin-bottom: 5px;
                font-weight: bold;
              }
              .itemImg {
                margin-bottom: 10px;
              }
              .itemBottom {
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 15px;
              }
              .itemKg {
                background: url("../../assets/img/list/wgBg.png") no-repeat
                  center;
                background-size: cover;
                color: #ffa800;
              }
              .itemBY {
                background: url("../../assets/img/list/byBg.png") no-repeat
                  center;
                background-size: cover;
                color: #5ce4ec;
              }
            }
          }
        }
        .middle {
          width: 532px;
          height: 294px;
          background: url("../../assets/img/layout/itemBg.png") no-repeat center;
          background-size: cover;
          margin-top: 20px;
          .monthDay {
            margin: 0 auto;
            width: 520px;
            height: 270px;
            position: relative;
            .monthBg {
              width: 82%;
              height: 56%;
              background: url("../../assets/img/list/Cwang.png") no-repeat
                center;
              background-size: cover;
              position: absolute;
              left: 43px;
              bottom: 68px;
            }
          }
        }
      }
    }
  }
}
</style>
